<template>
    <div class="box">
        <div class="team">
            <div class="title">优胜队</div>
            <div style="display: flex;flex-direction: column; justify-content: center;">
                <div class="yes">

                    <div @click="team = 1" :class="['nochoose', { 'choosed': team == 1 }]">正</div>

                </div>
                <div class="no">

                    <div @click="team = 2" :class="['nochoose', { 'choosed': team == 2 }]">反</div>

                </div>
            </div>

        </div>
        <div class="per">
            <div class="title">最佳辩手</div>
            <div style="display: flex; justify-content: center;">
                <div class="yess">
                    <div>正方一辩</div>
                    <div @click="yesper = 1" :class="['nochoose', { 'choosed': yesper == 1 }]"></div>
                    <div>正方二辩</div>
                    <div @click="yesper = 2" :class="['nochoose', { 'choosed': yesper == 2 }]"></div>
                    <div>正方三辩</div>
                    <div @click="yesper = 3" :class="['nochoose', { 'choosed': yesper == 3 }]"></div>
                    <div>正方四辩</div>
                    <div @click="yesper = 4" :class="['nochoose', { 'choosed': yesper == 4 }]"></div>
                </div>
                <div class="nos">
                    <div>反方一辩</div>
                    <div @click="yesper = 5" :class="['nochoose', { 'choosed': yesper == 5 }]"></div>
                    <div>反方二辩</div>
                    <div @click="yesper = 6" :class="['nochoose', { 'choosed': yesper == 6 }]"></div>
                    <div>反方三辩</div>
                    <div @click="yesper = 7" :class="['nochoose', { 'choosed': yesper == 7 }]"></div>
                    <div>反方四辩</div>
                    <div @click="yesper = 8" :class="['nochoose', { 'choosed': yesper == 8 }]"></div>
                </div>
            </div>
        </div>


    </div>
    <div style="width: 100%; display: flex; justify-content: center;">
        <el-button style="margin: 0 0  50px 0; width: 100px;height: 70px;transform: translate(-50%, -90%);" @click="submit">提交</el-button>
    </div>

</template>

<script setup>
import { ref } from 'vue';

const team = ref(-1);
const yesper = ref(-1);

const submit = () => {
    if (team.value == -1 || yesper.value == -1) {
        ElMessage.error("请选择");
        return;
    }
    ElMessage.success("提交成功");
}

</script>

<style scoped>
.box {
    display: flex;
    justify-content: space-around;
    height: 100vh;

    .title {
        width: 400px;
        height: 100px;
        font-size: 50px;
        font-weight: 600;
        line-height: 100px;
        color: white;
        border-radius: 15px;
        background-color: #81429e;
        box-shadow: 0 0 5px 3px rgb(0, 0, 0);
        margin: 10px;
        display: flex;
        justify-content: center;


    }

    .team {
        .yes {
            display: flex;
        }

        .no {
            display: flex;
        }

        .nochoose {
            width: 200px;
            height: 200px;
            border-radius: 100px;
            box-shadow: 0 0 5px 3px rgb(0, 0, 0);
            margin: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 100px;
            font-weight: 600;
            color: black;
            cursor: pointer;
            transition: all 0.5s;
            
        }

        .choosed {
            border-radius: 50px;
            background-color: #81429e;
            color: white;
        }

    }

    .per {
        .yess {
            width: 100px;
            margin: 0 30px;

        }

        .nos {
            width: 100px;
            margin: 0 30px;


        }
        .yess>div:nth-child(2n+1),
        .nos>div:nth-child(2n+1) {
            display: flex;
            justify-content: center;
            font-size: 20px;
            font-weight: 700;
        }

        .nochoose {
            width: 100px;
            height: 100px;
            background-color: white;
            cursor: pointer;
            border-radius: 50px;
            box-shadow: 0 0 5px 3px rgb(0, 0, 0);
            margin: 10px;
                        transition: all 0.3s;

        }

        .choosed {
            background-color: #81429e;

        }
    }
}
</style>